
// 创建默认头像全局指令
// 第一种写法：只需要再main文件中导入，不需要再次 directive 注册

// import Vue from 'vue'
// Vue.directive('imgError', {
//   // 使用该指令的DOM元素，插入到页面中会执行inserted
//   // el: 使用该指令的DOM元素
//   // binding: 是使用指令时传过来的数据(binding.value)
//   inserted(el, binding) {
//     // console.log(el)
//     // console.log(binding)
//     // 因为第一个参数传过来的时该指令的DOM元素，所以可以通过 onerror 监听到元素的图片加载是否失败
//     el.onerror = () => {
//       // 如果加载失败时，将穿过来的图片替换到DOM元素中的src
//       el.src = binding.value
//     }
//   }
// })

// 第二种写法：需要导出对象，并在main文件中注册
export const imgError = {
  // 使用该指令的DOM元素，插入到页面中会执行inserted
  // el: 使用该指令的DOM元素
  // binding: 是使用指令时传过来的数据(binding.value)
  inserted(el, binding) {
    // console.log(el)
    // console.log(binding)
    // 因为第一个参数传过来的时该指令的DOM元素，所以可以通过 onerror 监听到元素的图片加载是否失败
    el.onerror = () => {
      // 如果加载失败时，将穿过来的图片替换到DOM元素中的src
      el.src = binding.value
    }
  }
}
